<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta name="keywords" content="">
        <meta name="deacription" content="">
        <link rel="stylesheet" href="./">
        <title></title>
        
    </head>
    <body>
        <div id="add">
            <ul>
                <li v-for="( item,index ) in lyric">第{{index+1}}句：{{item.detail}}</li>
            </ul>
            <!-- 
                v-for="(item, index) in 要遍历的数据"

                遍历的元素要求添加一个key属性，值是唯一的(稳定) 一般使用id
                key用来提升更新性能
            -->
        </div>
        <script src="../js/vue.js"></script>
        <script>
            const vm = new Vue({
                data:{
                    // lyric歌词
                    lyric:[
                        {id:1,detail:"阿门阿前一棵葡萄树"},
                        {id:2,detail:"阿嫩阿嫩绿的刚发芽"},
                        {id:3,detail:"蜗牛背着那重重的壳呀"},
                        {id:4,detail:"一步一步地往上爬"},
                    ]
                },
            });
            vm.$mount("#add");
        </script>
    </body>
</html>